<template>
  <div style="background-color: #fff;margin-top: 30px;">
    <div style="padding-top: 20px;">
      <el-form ref="editForm" :model="editForm" status-icon label-position="right"
               label-width="100px" style="display: flex">
        <el-form-item label="开始日期：" prop="startTime">
          <el-date-picker
            style="width:100%"
            v-model="editForm.startTime"
            type="date"
            placeholder="开始日期"
            value-format="yyyy/MM/dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期：" prop="endTime">
          <el-date-picker
            style="width: 100%"
            v-model="editForm.endTime"
            type="date"
            placeholder="结束日期"
            value-format="yyyy/MM/dd">
          </el-date-picker>
        </el-form-item>
        <div style="margin: 0 15px">
          <el-button type="primary" @click="changeHandler" icon="el-icon-search">查询</el-button>
        </div>
        <el-form-item label="选择银行：">
          <el-radio-group v-model="editForm.bankCode" @change="changeHandler">
            <el-radio label="0000">富民银行</el-radio>
            <el-radio label="0001">网商银行</el-radio>
            <el-radio label="0002">振兴银行</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <div ref="chart" class="echart"></div>
  </div>
</template>
<script>
import {doGet, doPost} from '@/api'

export default {
  name: 'correlation',
  filters: { },
  data() {
    return {
      list: [],
      list1: [],
      monthList1: [],
      commissionList: [],
      editForm: {
        startTime: undefined,
        endTime: undefined,
        bankCode: '0000'
      },
      amountList0: [],
      commissionList0: [],
      monthList: [],
      dayList: [],
      xaxData: [],
      bankName: '富民'
    }
  },
  created() {
    this.changeHandler()
  },
  mounted() { },
  methods: {
    changeHandler(value) {
      if (this.editForm.bankCode == '0000') {
        this.$nextTick(() => {
          this.getList('0000')
        })
      } else if (this.editForm.bankCode == '0001') {
        this.$nextTick(() => {
          this.getList('0001')
        })
      } else {
        this.$nextTick(() => {
          this.getList('0002')
        })
      }
    },
    getList(e) {
      const myChart = this.$echarts.init(this.$refs.chart);
      doGet('accountStatistics.html?op=bankByTime', this.editForm).then(response => {
        let data = response.data
        let amountList0 = []
        let commissionList0 = []
        let monthList = []
        let dayList = []
        if (data[e] != null) {
          if (data[e].day) {
            for (var item of data[e].day) {
              amountList0.push(item.amount)
              commissionList0.push((item.commission))
              dayList.push(item.year + '年' + item.month + '月' + item.d + '日')
            }
          }
          if (data[e].month) {
            for (var item of data[e].month) {
              amountList0.push(item.amount)
              commissionList0.push((item.commission))
              monthList.push(item.year + '年' + item.month + '月')
            }
          }
        }
        // this.monthList = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        // this.treeData = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']
        let xaxData = dayList
        if (monthList.length != 0) {
          xaxData = monthList
        }
        if (e == '0000') {
          this.bankName = '富民'
        } else if (e == '0001') {
          this.bankName = '网商'
        } else {
          this.bankName = '振兴'
        }
        myChart.setOption({
          title: {
            text: `统计${ this.bankName }银行的贴现金额和返佣金额`
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            data: ['贴现金额', '返佣金额']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: xaxData,
              axisLabel: {
                rotate: 45,
              }
            }
          ],
          yAxis: [{
            type: 'value',
            boundaryGap: [0, '100%']
          }],
          dataZoom: [{
            type: 'inside',
            start: 0,
            end: 100
          }, {
            start: 0,
            end: 12,
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
              color: '#fff',
              shadowBlur: 3,
              shadowColor: 'rgba(0, 0, 0, 0.6)',
              shadowOffsetX: 2,
              shadowOffsetY: 2
            }
          }],
          series: [
            {
              name: '贴现金额',
              type: 'line',
              stack: '总量',
              areaStyle: {},
              data: amountList0
            },
            {
              name: '返佣金额',
              type: 'line',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'top'
                }
              },
              areaStyle: {},
              data: commissionList0
            }
          ]
        });
      }).catch(response => {
        // this.list = []
        this.$notify.error({
          title: '失败',
          message: response.message
        })
      })
    },
  },
}
</script>
<style>
  .echart {
    height: 450px;
  }
</style>
